﻿<!DOCTYPE HTML>
<html>
  <head>
    <title>html2pdf Test - Pagebreaks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css">
      /* Avoid unexpected sizing on all elements. */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      /* CSS styling for before/after/avoid. */
      .before {
        page-break-before: always;
      }
      .after {
        page-break-after: always;
      }
      .avoid {
        page-break-inside: avoid;
      }

      /* Big and bigger elements. */
      .big {
        height: 10.9in;
        background-color: yellow;
        border: 1px solid black;
      }
      .fullpage {
        height: 11in;
        background-color: fuchsia;
        border: 1px solid black;
      }
      .bigger {
        height: 11.1in;
        background-color: aqua;
        border: 1px solid black;
      }

      /* Table styling */
      table {
        border-collapse: collapse;
      }
      td {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <!-- Different options. -->
    <select id="mode">
      <option value="avoid-all">Avoid-all</option>
      <option value="css">CSS</option>
      <option value="legacy">Legacy</option>
      <option value="specify">Specified elements (using before/after/avoid)</option>
    </select>

    <!-- Button to generate PDF. -->
    <button onclick="test()">Generate PDF</button>

    <!-- Div to capture. -->
    <div id="root">
      <p>First line</p>
      <p class="before">Break before</p>
      <p class="after">Break after</p>
      <p>No effect (should be top of 3rd page, using css or specify).</p>
      <p class="html2pdf__page-break">Legacy (should create a break after).</p>
      <p>No effect (should be top of 2nd page, using legacy).</p>
      <p class="avoid big">Big element (should start on new page, using avoid-all/css/specify).</p>
      <p>No effect (should start on next page *only* using avoid-all).</p>
      <p>No effect (for spacing).</p>
      <p class="avoid fullpage">Full-page element (should start on new page using avoid-all/css/specify).</p>
      <p>No effect (for spacing).</p>
      <p class="avoid bigger">Even bigger element (should continue normally, because it's more than a page).</p>

      <!-- Advanced avoid-all tests. -->
      <div>
        <p>No effect inside parent div (testing avoid-all - no break yet because parent is more than a page).</p>
        <p class="big">Big element inside parent div (testing avoid-all - should have break before this).</p>
      </div>
      <table>
        <tr>
          <td>Cell 1-1 - start of new page (avoid-all only)</td>
          <td>Cell 1-2 - start of new page (avoid-all only)</td>
        </tr>
        <tr class="big">
          <td>Cell 2-1 - start of another new page (avoid-all only)</td>
          <td>Cell 2-2 - start of another new page (avoid-all only)</td>
        </tr>
      </table>
    </div>

    <!-- Include html2pdf bundle. -->
    <script src="../../dist/html2pdf.bundle.js"></script>

    <script>
      // Pagebreak fields:  mode, before, after, avoid
      // Pagebreak modes:   'avoid-all', 'css', 'legacy'

      function test() {
        // Get the element.
        var element = document.getElementById('root');

        // Choose pagebreak options based on mode.
        var mode = document.getElementById('mode').value;
        var pagebreak = (mode === 'specify') ?
            { mode: '', before: '.before', after: '.after', avoid: '.avoid' } :
            { mode: mode };

        // Generate the PDF.
        html2pdf().from(element).set({
          filename: mode + '.pdf',
          pagebreak: pagebreak,
          jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true}
        }).save();
      }
    </script>
  </body>
</html>
